<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="inc/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <%@ include file="inc/meta.jsp" %>
    <meta name="description" content="">
    <meta name="author" content="">
    <title>物品详情</title>
    <%@ include file="inc/css.jsp" %>
</head>
<body>

<div id="posts" class="wrapper">

    <%@ include file="inc/nav.jsp" %>

    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">物品列表</h1>
                <h4 style="margin-left: 10px;" id="showH">——查看物品详情</h4>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <!-- /.panel-heading -->
                    <div class="panel-body">
                        <form id="infoForm" method="post" action="backend/letterAnnex/save" class="form-horizontal nice-validator n-default" role="form" novalidate="novalidate" enctype="multipart/form-data">
                            <input type="hidden" id="letterAnnexId" name="letterAnnexId" value="${letterAnnex.id}"/>
                            <input type="hidden" id="letterAnnexType" value="${letterAnnex.type}"/>
                            <input type="hidden" id="letterAnnexCover" value="${letterAnnex.cover}"/>
                            <input type="hidden" id="letterAnnexContent" value="${letterAnnex.content}"/>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">封面:</label>

                                <div class="col-sm-4">
                                    <input type="file" name="cover" id="mainImage" style="display:none;"/>
                                    <a href="javascript:void(0);" onclick="_letterAnnexInfo.fn.AddImg()">
                                        <img id="mainPicture" src="static/images/add.jpg" style="height: 200px; width: 200px; display: inline; margin-bottom: 5px;" border="1"/>
                                    </a>
                                </div>
                            </div>

                            <div class="form-group" id="contentDiv">
                                <label class="col-sm-2 control-label">内容:</label>

                                <div class="col-sm-4">
                                    <input type="file" name="content" id="mainImage2" style="display:none;"/>
                                    <a href="javascript:void(0);" onclick="_letterAnnexInfo.fn.AddImg2()">
                                        <img id="mainPicture2" src="static/images/add.jpg" style="height: 200px; width: 200px; display: inline; margin-bottom: 5px;" border="1"/>
                                    </a>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">名称:</label>

                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="name" name="name" maxlength="20"
                                           data-rule="required" value="${letterAnnex.name}" placeholder="请输入名称"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">类型:</label>

                                <div class="col-sm-4">
                                    <select class="form-control" id="typeList" name="type" style="width: 150px;">
                                        <option value="1">信纸</option>
                                        <option value="2">信封</option>
                                        <option value="3">邮票</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">物品编号:</label>

                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="num" name="num" maxlength="20"
                                           data-rule="required" value="${letterAnnex.num}" placeholder="请输入物品编号"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">价格:</label>

                                <div class="col-sm-4">
                                    <input type="number" class="form-control" id="money" name="money" maxlength="11"
                                           data-rule="required" value="${letterAnnex.money}" placeholder="请输入价格"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">详情描述:</label>

                                <div class="col-sm-6">
                                    <textarea id="description" name="description" class="form-control" maxlength="200" style="resize: none" placeholder="请输入详情描述" cols="40" rows="8">${letterAnnex.description}</textarea>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-6" style="text-align: center">
                                    <button type="button" class="btn btn-primary" onclick="_letterAnnexInfo.fn.subInfo()">确定添加</button>
                                    <button type="button" class="btn btn-primary" onclick="_letterAnnexInfo.fn.goBack()">返回</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- /.panel-body -->

                </div>
                <!-- /.panel -->
            </div>
        </div>

    </div>
    <!-- /#page-wrapper -->

</div>
<!-- /#wrapper -->

<%@ include file="inc/footer.jsp" %>

</body>

<script type="text/javascript">
    var _letterAnnexInfo = {
        v: {
            id: "_letterAnnexInfo",
            list: [],
            dTable: null
        },
        fn: {
            init: function () {
                if ($("#letterAnnexId").val() != "") {
                    $("#showH").text("——编辑物品详情");
                }

                $("#mainImage").uploadPreview({
                    Img: "mainPicture",
                    Width: 200,
                    Height: 170
                });

                $("#mainImage2").uploadPreview({
                    Img: "mainPicture2",
                    Width: 200,
                    Height: 170
                });

                $('#typeList').change(function () {
                    if ($(this).val() == 1) {
                        $('#contentDiv').css('display', '');
                    } else {
                        $('#contentDiv').css('display', 'none');
                        $('#mainPicture2').prop('src', 'static/images/add.jpg');
                    }
                });

                var letterAnnexCover = $('#letterAnnexCover').val();
                if (null != letterAnnexCover && letterAnnexCover != '') {
                    $('#mainPicture').prop('src', letterAnnexCover);
                }
                var letterAnnexContent = $('#letterAnnexContent').val();
                if (null != letterAnnexContent && letterAnnexContent != '') {
                    $('#mainPicture2').prop('src', letterAnnexContent);
                }

                var letterAnnexType = $('#letterAnnexType').val();
                if (null != letterAnnexType && letterAnnexType != '') {
                    $('#typeList').val(letterAnnexType);
                    $('#typeList').change();
                }
            },
            AddImg: function () {
                // a标签绑定onclick事件
                $('#mainImage').click();
            },
            AddImg2: function () {
                // a标签绑定onclick事件
                $('#mainImage2').click();
            },
            checkData: function () {
                var flag = true;
                var type = $('#typeList option:selected').val();
                var cover = $('#mainPicture').prop('src');
                var content = $('#mainPicture2').prop('src');
                var name = $('#name').val();
                var num = $('#num').val();
                var money = $('#money').val();
                var description = $('#description').val();

                if (null == cover || cover == '' || cover == _basePath + 'static/images/add.jpg' || cover == 'static/images/add.jpg') {
                    $leoman.notify("请上传封面图片", "error");
                    flag = false;
                    return;
                }

                if (type == 1) {
                    if (null == content || content == '' || content == _basePath + 'static/images/add.jpg' || content == 'static/images/add.jpg') {
                        $leoman.notify("请上传内容图片", "error");
                        flag = false;
                        return;
                    }
                }

                if (null == name || name == '') {
                    $leoman.notify('名称不能为空', "error");
                    flag = false;
                    return;
                }

                if (null == num || num == '') {
                    $leoman.notify('物品编号不能为空', "error");
                    flag = false;
                    return;
                }

                if (null == money || money == '') {
                    $leoman.notify('价格不能为空', "error");
                    flag = false;
                    return;
                }

                if (Number(money) <= Number(0)) {
                    $leoman.notify("价格需大于0", "error");
                    flag = false;
                    return;
                }

                if (null == description || description == '') {
                    $leoman.notify('详情描述不能为空', "error");
                    flag = false;
                    return;
                }

                return flag;
            },
            subInfo: function () {
                // 所有的验证通过后，执行新增操作
                if (_letterAnnexInfo.fn.checkData()) {
                    $("#infoReduceDialogModal").modal("show");

                    $("#infoForm").ajaxSubmit({
                        url: _basePath + "backend/letterAnnex/save",
                        dataType: "json",
                        success: function (data) {
                            $('#infoReduceDialogModal').modal("hide");
                            if (data == 1) {
                                window.location.href = _basePath + "backend/letterAnnex/index";
                            } else {
                                $leoman.notify("操作失败", "error");
                            }
                        }
                    });
                }
            },
            goBack: function () {
                window.location.href = "backend/letterAnnex/index";
            }
        }
    }

    $(document).ready(function () {
        _letterAnnexInfo.fn.init();
    });

</script>

</html>